<template>
  <div id="detail">
  <DetailNvabar
  class="navBar"
  @tabClick='handleClick'
  ref="navbar"/>
  <Scroll
  class="content"
  ref="scroll"
  @getScrollY='getScrollY'
  :probeType='3'>
      <DetailSwiper
  :images='topImgs'
  />
  <DetailGoodsInfo
  :goodsData='goods'
  />
  <DetailShop
  :shop ='shop'
  />
  <DetailInfo
  :goods='detailInfo'
  @imgLoad='imageLoad'/>
  <DetailParamInfo
  ref="param"
  :params='params'
  />
  <DetailCommentInfo
  ref="comment"
  :commentInfo='commentInfo'/>
  <DetailRecommendInfo
  ref="recommend"
  :recommendsInfo='recommendInfo'/>
  </Scroll>
  <DetailBar
  @addToCart='goCar'/>
      <BackTop
      @click.native="backClick"
      v-show="isFlag"/>
  </div>
</template>

<script>
// 引入组件
import DetailNvabar from './childComps/DetailNvabar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailShop from './childComps/DetailShop'
import DetailInfo from './childComps/DetailInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailRecommendInfo from './childComps/DetailRecommendInfo'
import DetailBar from './childComps/DetailBar'
import Scroll from '@/components/common/scroll/Scroll'
// 发送请求+整合的数据
import { Detail, Goods, Shop, GoodsParam, Recommend } from '@/api/detail.js'
// 引入共同代码
import { common, backTop } from '@/mixin/mixin.js'
// 引入vuex
import { mapMutations } from 'vuex'
export default {
  name: 'Detail',
  mixins: [common, backTop],
  data () {
    return {
      iid: null,
      topImgs: [], // 这里不能为null 因为那边我们要求传数组类型 所以不能用null
      goods: {}, // 同上
      shop: {},
      detailInfo: {},
      params: {},
      commentInfo: {},
      recommendInfo: [],
      topY: [],
      currentIndex: null
    }
  },
  async created () {
    // 拿到id 用于发送请求
    this.iid = this.$route.params.id
    // 拿详情请求数据
    const res = await Detail.Req({
      iid: this.iid
    })
    // 获取伦坡数据
    this.topImgs = res.result.itemInfo.topImages
    // 整理数据发送给封装的展示组件 ---商品信息
    const { itemInfo, columns, shopInfo } = res.result
    const { services } = res.result.shopInfo
    // console.log({ itemInfo, columns, services })
    this.goods = new Goods(itemInfo, columns, services)
    // 创建店铺信息的对象
    this.shop = new Shop(shopInfo)
    // 保存商品详情数据 这个数据少不需要用到类
    this.detailInfo = res.result.detailInfo
    // 商品参数
    const { info, rule } = res.result.itemParams
    this.params = new GoodsParam(info, rule)
    // 取出评论信息
    if (res.result.cRate !== 0) {
      this.commentInfo = res.result.rate.list[0]
    }
    // 拿recommend数据
    const ResData = await Recommend.Req()
    this.recommendInfo = ResData.data.list
  },
  methods: {
    ...mapMutations(['add']),
    imageLoad () {
      this.$refs.scroll.refresh()
      // 获取滚动得数据实现联动结合下面那个方法
      this.topY = []
      this.topY.push(0)
      this.topY.push(this.$refs.param.$el.offsetTop)
      this.topY.push(this.$refs.comment.$el.offsetTop)
      this.topY.push(this.$refs.recommend.$el.offsetTop)
      this.topY.push(Number.MAX_VALUE)
      // console.log(this.topY)
    },
    handleClick (index) {
      // alert(index)点击滚动到对应位置
      this.scrollTo(0, -this.topY[index])
    },
    // scrollTo (x = 0, y = 0, time = 600) {
    //   this.$refs.scroll.bscroll.scrollTo(x, y, time)
    // },
    getScrollY (y) {
      // 用于控制是否显示
      this.isShow(y)
      // 处理联动的
      let positionY = -y
      let length = this.topY.length
      for (let i = 0; i < length - 1; i++) {
        if (this.currentIndex !== i && (positionY >= this.topY[i] && positionY <= this.topY[i + 1])) {
          this.currentIndex = i
          // console.log(this.currentIndex)
          this.$refs.navbar.currentIndex = this.currentIndex
        }
      }
    },
    goCar () {
      // 获取商品信息 把需要的保存起来注意唯一标识id
      const product = {
        image: this.topImgs[0],
        title: this.goods.title,
        desc: this.goods.desc,
        price: this.goods.realPrice,
        iid: this.iid
      }
      // console.log(product)
      this.add(product)
      // this.$router.push('/cart')
      console.log(111)
    }
  },
  components: {
    DetailNvabar,
    DetailSwiper,
    DetailGoodsInfo,
    DetailShop,
    Scroll,
    DetailInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailRecommendInfo,
    DetailBar
  },
  mounted () {
  },
  destroyed () {
    this.$bus.$off('itemImageLoad', this.detailBusFn
    )
  },
  computed: {

  }
}
</script>

<style lang='scss' scoped>
#detail {
  position: relative;
   height: 100vh;
   z-index: 10;
   .content {
   background-color: #fff;
   position: absolute;
   top: 44px;
   bottom: 58px;
   left: 0;
   right: 0;
 }
}

</style>
